<template>
  <view :style="colorStyle">
    <block v-if="isShow">
      <view class="applyModule">
        <image
          :src="configInfo.distribution"
          class="img"
          mode="aspectFill"
        ></image>
        <!-- <view class="ruleModule cfff f24" @click="gourl('/pages/distributor/list')">
				申请记录
			</view> -->
      </view>

      <view class="infobox1">
        <view class="info1">
          <view class="label"> 姓名 </view>
          <view class="input">
            <input
              type="text"
              class="c1F1F1F f28"
              placeholder-class="placeholder"
              placeholder="请输入联系人姓名"
              v-model="name"
              :disabled="info.status !== -1"
            />
          </view>
        </view>
        <view class="info1">
          <view class="label"> 手机号码 </view>
          <view class="input">
            <input
              type="number"
              class="c1F1F1F f28"
              placeholder-class="placeholder"
              placeholder="请输入手机号码"
              v-model="mobile"
              :disabled="info.status !== -1"
            />
          </view>
        </view>
        <!-- <view class="info1" style="border: none">
        <view class="label"> 上传凭证（仅支持9张） </view>
        <view class="imgList flex wrap aitems">
          <view class="img" v-for="(item, index, key) in img" :key="key">
            <image :src="item" mode="aspectFill"></image>
            <view
              class="close"
              @click="closeImg(index)"
              v-if="info.status == -1"
            >
              <image src="@/static/img41.png" class="" mode=""></image>
            </view>
          </view>
          <view
            class="img"
            @click="uploadImg"
            v-if="img.length < 9 && info.status == -1"
          >
            <image src="@/static/img20.png" mode=""></image>
          </view>
        </view>
      </view> -->
        <!-- <view class="globalBtns">
				<view class="block1" @click="save">
					提交申请
				</view>
				<view class="radioGroup">
					<radio-group>
						<view class="radio flex aitems jcenter" @click="check = !check">
							<radio style="transform: scale(0.7);" :checked="check"
								:activeBackgroundColor="`var(--view-theme)`"></radio>
							<view class="radiotext f24">
								请认真阅读并同意<text
									@click="gourl(`/pages/user/xieyi?key=distributor_code&title=申请须知`)">《申请须知》</text>
							</view>
						</view>
					</radio-group>
				</view>
			</view> -->
      </view>

      <view
        class="globalBtns"
        style="
          position: relative;
          top: -120rpx;
          margin: 50rpx 30rpx 0;
          background: transparent;
        "
        v-if="info.status == 0"
      >
        <view class="block1" style="background: #ef8200"> 审核中 </view>
      </view>

      <view
        class="globalBtns"
        style="
          position: relative;
          top: -120rpx;
          margin: 50rpx 30rpx 0;
          background: transparent;
        "
        v-if="info.status == 1"
      >
        <view class="block1" style="background: var(--view-theme)">
          审核通过
        </view>
      </view>

      <view
        class="globalBtns"
        style="
          position: relative;
          top: -120rpx;
          margin: 50rpx 30rpx 0;
          background: transparent;
        "
        v-if="info.status == -1"
      >
        <view class="tcenter cDD5C5C f28" style="padding: 30rpx 0">
          审核失败原因：{{ info.remark }}
        </view>
        <view class="block1" @click="save" style="background: #dd5c5c">
          重新申请
        </view>
        <view class="radioGroup">
          <radio-group>
            <view class="radio flex aitems jcenter" @click="check = !check">
              <radio
                style="transform: scale(0.7)"
                :checked="check"
                :activeBackgroundColor="`var(--view-theme)`"
              ></radio>
              <view class="radiotext f24">
                请认真阅读并同意<text
                  @click="
                    gourl(
                      `/pages/user/xieyi?key=distributor_code&title=申请须知`
                    )
                  "
                  >《申请须知》</text
                >
              </view>
            </view>
          </radio-group>
        </view>
      </view>
    </block>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  placeApplySave,
  placAapplyUpdate,
  applyInfo,
  putFileOSS,
  config as configAPI,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, showModal, msg, back, go } from "@/utils/wxAPI";
import { getToken, setStorage } from "../../utils/storage";
import { isvalidatemobile } from "@/utils/validate.js";
export default {
  mixins: [colors],
  data() {
    return {
      check: false,
      img: [],
      name: "",
      mobile: "",
      info: {},
      configInfo: {},
    };
  },
  onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.config();
      this.applyInfo();
    }
  },
  methods: {
    async config() {
      let { data } = await configAPI({
        key: "imgs",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        this.configInfo = info;
      }
    },
    async applyInfo() {
      loading();
      let { data } = await applyInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.name = info.name;
        this.mobile = info.mobile;
        this.img = info.img ? info.img.split(",") : [];
        this.info = info;
      }
      uni.hideLoading();
    },
    closeImg(index) {
      this.img.splice(index, 1);
    },
    async uploadImg() {
      uni.chooseImage({
        count: 9 - this.img.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.img.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    async save() {
      if (!this.check) {
        return msg("请阅读并同意《申请须知》");
      }
      if (!this.name) {
        return msg("请输入联系人姓名");
      }
      if (isvalidatemobile(this.mobile)[0]) {
        return msg(isvalidatemobile(this.mobile)[1]);
      }
      // if (this.img.length == 0) {
      //   return msg("至少上传1张图片");
      // }
      loading();
      if (this.options.id) {
        let { data } = await placeApplySave({
          name: this.name,
          mobile: this.mobile,
          // img: this.img.join(","),
          img: "",
          // status: 0,
          // id: this.options.id ? this.options.id : "",
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          showModal({
            t2: "提交成功，请等待审核",
            btn1show: false,
          }).then(() => {
            this.name = "";
            this.mobile = "";
            this.img = [];
            setStorage("distributorRef", 1);
            back();
            // go(`/pages/distributor/list`)
          });
        }
        uni.hideLoading();
        return;
      }
      let { data } = await placeApplySave({
        name: this.name,
        mobile: this.mobile,
        img: "",
        // img: this.img.join(","),
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        showModal({
          t2: "提交成功，请等待审核",
          btn1show: false,
        }).then(() => {
          this.name = "";
          this.mobile = "";
          this.img = [];
          setStorage("distributorRef", 1);
          back();
        });
      }
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.applyModule {
  position: relative;

  .img {
    width: 100%;
    height: 422rpx;
  }

  .ruleModule {
    position: fixed;
    width: 171rpx;
    height: 56rpx;
    border-radius: 28rpx 0 0 28rpx;
    right: 0;
    top: 66rpx;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    line-height: 56rpx;
    text-align: center;
  }
}

.infobox1 {
  background: #ffffff;
  margin: 30rpx 30rpx 0;
  padding: 30rpx 30rpx 40rpx 30rpx;
  border-radius: 30rpx;
  position: relative;
  top: -130rpx;
}

.infobox1 .info1 {
  // height: 100rpx;
  padding: 24rpx 0;
  // border-bottom: 1px solid red;
  border-bottom: 1px solid #f5f5f5;
}

.infobox1 .info1 .label {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #525252;
}

.infobox1 .info1 .label text {
  color: #f65b49;
  font-size: 24rpx;
}

.infobox1 .info1 .input {
  position: relative;
  margin: 24rpx 0 0;
  // width: calc(100% - 200rpx);
}

.infobox1 .info1 .placeholder {
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  color: #bec6cd;
}

.infobox1 .info1 .input input {
  // text-align: right;
  width: 100%;
  font-style: normal;
  font-weight: 400;
  // font-size: 32rpx;
  // color: #858585;
}

.infobox1 .info1 .icon {
  width: 100rpx;
  height: 60rpx;
}

.imgList {
  margin: 30rpx 0 0;

  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 24rpx;
    margin: 0 30rpx 30rpx 0;
  }

  .img {
    position: relative;

    .close {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      // border: 1px solid #858585;
      position: absolute;
      right: 10rpx;
      top: -10rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        // margin: auto;
        // top: 50%;
        // margin-top: -15rpx;
        // position: absolute;
        // left: 50%;
        // margin-left: -15rpx;
      }
    }
  }
}

.infobox1 .info1 .input .right {
  width: 40rpx;
  // height: 24rpx;
  position: absolute;
  top: 0rpx;
  right: 0;
}

.btn {
  width: 600rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  color: #ffffff;
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  background: #5ccedd;
  border-radius: 44rpx;
  margin: 30rpx auto 0;
  position: relative;
}

.globalBtns {
  // position: fixed;
  // bottom: 0;
  // width: 100%;
  background: #fff;
  margin: 50rpx 0 0;
  // padding: 0 0 50rpx 0;

  .block1 {
    // margin: 10rpx 30rpx 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
}

image {
  width: 100%;
  height: 100%;
}

.radioGroup {
  margin: 30rpx 0 0;

  .radiotext {
    // margin-left: 10rpx;
    text {
      color: #f65b49;
    }
  }
}
</style>
